<style>
    .card {
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;
        margin: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 10, 0.1);
    }
    .card-header{
        background-color: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid #efefef;
    }
    .card-body{
        padding: 10px;
    }
    .qrcode-box{
        flex: 0.3;
        min-width: 300px;
        padding-right: 15px;
    }
    .card-body,.qrcode-box{
        min-height: 400px;
    }
    .grid-box{
        flex: 0.7;
    }
    .grid{
        display: none;
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-item {
        padding: 10px;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
    }
    .grid-item:last-child{
        border-right: none;
    }
    .grid-item{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .text-s{font-size: 12px;}
    .text-m{font-size: 14px;}
    .text-l{font-size: 16px;}
    .text-x{font-size: 20px;}
    .text-xs{font-size: 24px;}
    .text-xm{font-size: 28px;}
    .text-xl{font-size: 32px;}
    .margin-b-5{margin-bottom: 5px;}
    .card{
        margin-bottom: 10px;
    }
    .flex{
        display: flex;
    }
    .flex-row{
        flex-direction: row;
    }
    .flex-column{
        flex-direction: column;
    }
    .jcc{
        justify-content: center;
    }
    .aic{
        align-items: center;
    }
    .grid-item-val-title{
        flex: .7
    }
    .grid-item-val-value{
        flex: .3;
    }
    iframe{
        margin-top: 22px;
    }
    .qrcode-text{
        font-size: 12px;
    }
</style>
<div class="page-content">
    <div class="row flex">
        <div class="grid-box">
            <div class="card">
                <div class="card-body">
                    <div class="grid" cols="3">
                        {foreach($total_data ?? [] as $v)}
                        <div class="grid-item ">
                            <a href="{$v.url|default='javascript:;'}" class="flex aic addtabsit {$v.a_class|default=''}">
                                <div class="grid-item-val-title text-s">{$v.title|default='待定'}</div>
                                <div class="grid-item-val-value text-xs margin-b-5">{$v.value|default='-'}</div>
                            </a>
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-xs-12 text-center qrcode-box card">
            <div class="card-body flex flex-column jcc aic ">
                <div class="qrcode">
                    <img src="{$qrcode|default=''}" width="280px" height="280px" style="background-color:#ffffff;" />
                </div>
                <div class="qrcode-text">
                    {$qrcode_end_text|default='如使用中遇到问题或定制功能可添加客服微信'}
                </div>
                {if(isset($version_data['version']))}
                <div class="version">
                    当前版本号：v{$version_data.version|default=''}
                    <a href="{$version_data.update_logs_url|default=''}" target="_blank" class="margin-l-5">查看更新内容</a>
                </div>
                {/if}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="bottom col-md-12">
            <iframe style="width: 100%;" src="{$adv_url|default=''}" frameborder="0"></iframe>
        </div>
    </div>
</div>
